<template>
  <div class="star" :class="starType">
     <i v-for="itemClass in itemClasses" :class="itemClass" class="star-item"></i>
  </div>
</template>

<script type="text/ecmascript-6">
  const LENGTH=5;
  const CLS_ON='on';
  const CLS_HALF='half';
  const CLS_OFF='off';
export default {
  props:{
    size:{
      type:Number
    },
    score:{
      type:Number
    },
  },
  computed:{
    starType() {
      return 'star-'+this.size;
    },
    itemClasses() {
      let result=[];
      let score= Math.floor(this.score*2)/2;
      let hasDecimal= score % 1 !== 0;
      let integer= Math.floor(score);
      for (let i = 0;i< integer;i++){
         result.push(CLS_ON);
      }
      if(hasDecimal){
        result.push(CLS_HALF);
      }
      while(result.length<LENGTH){
        result.push(CLS_OFF);
      }
      return result;
    }
  }
};
</script>

<style>
  .star{
    display: inline-block;
  }
  .star .star-item{
    display: inline-block;
    background-repeat: no-repeat;
  }
  .star .star-item:last-child{
    margin-right: 0;
  }
  .star.star-48 .star-item{
    width:20px;
    height:20px;
    background-size:20px 20px;
    margin-right: 22px;
  }
  .star.star-36 .star-item{
    width:15px;
    height:15px;
    background-size:15px 15px;
    margin-right: 6px;
  }
  .star.star-24 .star-item{
    width:12px;
    height:12px;
    background-size:12px 12px;
    margin-right: 3px;
  }
  .star.star-48 .on{
    background-image:url(star48_on@2x.png);
  }
  .star.star-48 .half{
    background-image:url(star48_half@2x.png);
  }
  .star.star-48 .off{
    background-image:url(star48_off@2x.png);
  }
  .star.star-36 .on{
    background-image:url(star36_on@2x.png);
  }
  .star.star-36 .half{
    background-image:url(star36_half@2x.png);
  }
  .star.star-36 .off{
    background-image:url(star36_off@2x.png);
  }
  .star.star-24 .on{
    background-image:url(star24_on@2x.png);
  }
  .star.star-24 .half{
    background-image:url(star24_half@2x.png);
  }
  .star.star-24 .off{
    background-image:url(star24_off@2x.png);
  }
</style>
